<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>选择字体</title>
        <style>
            html,body {
                margin:0;
                padding:0;
            }
            #wrap {
                width:556px;
                height:535px;
                margin:20px auto;
                background:url(img2/bg.jpg) no-repeat;
                position:relative;
            }
            #showBox {
                position:absolute;
                left:10px;
                top:100px;
                width:380px;
                height:278px;
            }
            #showBox div {
                display:inline-block;
                width:20px;
                margin:2px 0;
                padding:2px;
            }
            #showBox div img {
                width:16px;
                height:16px;
            }
            #fontStyle {
                position:absolute;
                left:1px;
                top:381px;
                width:150px;
                height:24px; 
            }
            #wrap textarea {
                width:396px;
                height:96px;
                position:absolute;
                left:0px;
                bottom:30px;
                border:0;
                outline:none;
            }
            #wrap input {
                width:82px;
                height:22px;
                position:absolute;
                right:154px;
                bottom:6px;
                cursor:pointer;
            }
        </style>
        <script>
            window.onload = function () {
                var oShowbox = document.getElementById("showBox");
                var oSelect = document.getElementById("fontStyle");
                var oTxt = document.getElementsByTagName("textarea")[0];
                var oBtn = document.getElementsByTagName("input")[0];
                var json = {
                    "qiqiu": "img2/balloon.png",
                    "honxin": "img2/heart.gif",
                    "jiong": "img2/jiong.gif",
                    "caidao": "img2/knife.gif",
                    "ganga": "img2/shuai.gif"
                }
                
                function chooseFont( whichFont, url , str ) {
                    if( oSelect.value == whichFont ) {
                        var arr = str.split("");
                        var str = "";
                        for(var i=0; i<arr.length; i++) {
                            str += "<div><img src=' "+ url +" '/><span>"+ arr[i] +"</span></div>";
                        }
                        oShowbox.innerHTML += str + "<br/>";
                        oTxt.value = "";
                    }
                }
                
                oBtn.onclick = function () {
                    var str = oTxt.value;
                    if( str == "") {
                        alert("请在输入框输入文字信息并发送");
                    }
                    if( oSelect.value == "default" ) {
                        oShowbox.innerHTML += str + "<br/>";
                        oTxt.value = "";
                    }
                    for( attr in json ) {
                        chooseFont( attr, json[attr], str );
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <div id="showBox"></div>
            <select name="fontStyle" id="fontStyle">
                <option value="qiqiu">告白气球</option>
                <option value="honxin">红心</option>
                <option value="jiong">囧</option>
                <option value="caidao">菜刀</option>
                <option value="ganga">尴尬</option>
                <option value="default" selected="selected">默认字体</option>
            </select>
            <textarea></textarea>
            <input type="button" value="发送"/>
        </div>
    </body>
</html>